<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>21.CSS实现tabbar凹凸圆选中动画</title>
</head>
<!-- 通用样式 -->
<link rel="stylesheet" href="../common.css" />
<!-- 阿里巴巴矢量图标库 -->
<link rel="stylesheet" href="../font.css" />
<style>
  /* 定义全局变量 */
  :root {
    --color: #222;
    --bg: orange;
    --w: 100px;
    --t: 450px;
    --c: 70px;
  }

  .container {
    background: #fff;
    width: var(--t);
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    position: relative;
  }

  .item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: var(--w);
    cursor: pointer;
  }

  .item span {
    font-size: 20px;
    position: relative;
    z-index: 1;
    /* 添加过渡效果 */
    transition: all 0.5s;
  }

  .item p {
    position: absolute;
    font-size: 15px;
    font-weight: bold;
    color: var(--color);
    transform: translateY(20px);
    /* 添加过渡效果 */
    transition: all 0.5s;
    /* 默认透明度为0，不显示 */
    opacity: 0;
  }

  /* 添加hover事件，以及选中样式 */
  .item:hover p,
  .item.active p {
    opacity: 1;
    transform: translateY(12px);
  }

  .item:hover span,
  .item.active span {
    transform: translateY(-35px);
  }

  .active-box {
    position: absolute;
    width: var(--c);
    height: var(--c);
    background: var(--bg);
    --left-pad: calc(var(--t) - (4 * var(--w)));
    top: -50%;
    left: calc((var(--left-pad) / 2) + (var(--w) / 2) - (var(--c) / 2));
    border-radius: 50%;
    border: 4px solid var(--color);
    /* 添加过渡效果 */
    transition: all 0.5s;
    /* 设置选中圆环的transform */
    transform: translateX(calc(var(--w) * var(--n)));
  }

  .active-box::before,
  .active-box::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 20px;
    height: 20px;
    background: transparent;
  }

  .active-box::before {
    left: -20px;
    border-radius: 0 20px 0 0;
    box-shadow: 0 -10px 0 0 var(--color);
  }

  .active-box::after {
    right: -20px;
    border-radius: 20px 0 0 0;
    box-shadow: 0 -10px 0 0 var(--color);
  }
</style>

<body>
  <div class="container">
    <!-- 第一个默认选中 -->
    <div class="item active" style="--n: 0">
      <span class="iconfont">&#xe611;</span>
      <p>三明治</p>
    </div>
    <div class="item" style="--n: 1">
      <span class="iconfont">&#xe65e;</span>
      <p>汉堡</p>
    </div>
    <div class="item" style="--n: 2">
      <span class="iconfont">&#xe698;</span>
      <p>沙冰</p>
    </div>
    <div class="item" style="--n: 3">
      <span class="iconfont">&#xe65c;</span>
      <p>可乐</p>
    </div>
    <!-- 添加选中圆环 -->
    <div class="active-box" style="--n: 0"></div>
  </div>
</body>
<script>
  const list = document.querySelectorAll(".item");
  let node = document.getElementsByClassName("active-box")[0];

  function clickActive() {
    list.forEach((item) => {
      item.classList.remove("active");
    });
    this.classList.add("active");
    node.style.setProperty("--n", this.style.getPropertyValue("--n").trim());
  }
  list.forEach((item) => {
    item.addEventListener("click", clickActive);
  });
</script>

</html>